
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>this指向</title>
</head>
<body>
    
    <button>点击</button>
    <input type="text" value="默认值">

    <script>
       // this: 关键字、指向 指代  一般指代的是谁调用它 this指向谁   this指向调用者           super: 子类指向父类构造器
        // - 全局内调用： fn()  指向window
        // - 对象内的方法调用：obj.fn()  指向调用对象
        // - 构造函数调用：new Person()   指向实例对象
        // - 事件处理函数中调用：指向当前触发事件的DOM元素
        // - 特殊调用 比如 call、apply、bind可以改变this指向，fun.call(obj)    指向 obj

        // es6中箭头函数的this指向  -》 父级作用域上下文对象


        // 1:全局环境下的this指向  window
        function fn() {
            console.log("hello");
            console.log(this);
            
        }
        fn()
        // this.fn()
        // window.fn()

        // 2:对象内的方法调用  指向调用对象

        const  obj = {
            name:"tom",
            sayName(){
                console.log(this.name);//tom
                console.log(this);     //obj
            }
        }

        obj.sayName()


        //3： 构造函数调用：new Person()

        function Person(name) {
            this.name = name
            console.log(this);//p实例
            
        }

        const p = new Person("lisi")


        // 4：事件处理函数中调用： 指向当前触发事件的DOM元素
        console.log( document.querySelector("button"));
        // document.querySelector("button").onclick = function () {
        //     console.log(this);
            
        // }
        // 原生js  addEventListener  
        document.querySelector("input").addEventListener("input",function () {
            console.log(this);
            
        })
        

        // 5:强制改变this指向   call()  apply()  bind()

        const  o = {
            name:"king",
            hobby:"swimming"
        }

        function fun() {
            console.log(this);
            
        }

        //  call apply 参数不一样，   call(this,a,b,c)   apply(this,[a,b,c])
        // bind 返回的是一个新的函数，你必须调用它才会被执行。 bind(this,a,b,c)()

        this.fun()//window
        // fun.call(o)
        // fun.apply(o)
        fun.bind(o)(this)


    </script>
</body>
</html>